<template>
  <ul>
    <!-- 
      .stop   停止事件冒泡 
      .prevent   阻止事件的默认行为 (链接的点击默认行为/点击表单中的提交按钮默认行)
     -->
    <li v-for="(item, index) in data" :key="index" @click.stop="handleClick(item)">
      {{item.text}}
      <!-- 根据item1.children来显示下一级列表  递归组件-->
      <Tree2 :data="item.children" v-if="item.isShowChildren && item.children && item.children.length"/>
    </li>
  </ul>
</template>

<script> 
/* 一个组件内部有自己的组件标签 */
export default {  // 
  name: 'Tree2', // 作为内部的标签名
  props: ['data'],
  data () {
    return {
      // expend: false
    }
  },
  methods: {
    handleClick (item) {
      console.log('-----handleClick')
      if (!item.hasOwnProperty('isShowChildren')) {
        this.$set(item, 'isShowChildren', true)
      } else {
        item.isShowChildren = !item.isShowChildren
      }
    } 
  }
}
</script>